<script setup lang="ts">
import { ref, watch} from 'vue'
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Pagination, Autoplay} from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import {Newslist} from "@/api/type";

const props = defineProps<{
  newsList: Newslist[]
}>()
const newsList = ref<Newslist[]>([])
const imageBase=''
//监听props.newsList变化
watch(() => props.newsList, (newVal) => {
  if (newVal.length > 0) {
    newsList.value = newVal
  }
},{immediate:true})
</script>

<template>
  <div class="overflow-x-hidden bg-jacarta-50 lg:h-screen dark:bg-jacarta-800 font-body text-jacarta-500" itemscope>
    <main>
      <!-- Rankings -->
      <section class="container relative overflow-hidden">
        <Swiper
            :modules="[ Autoplay]"
            :spaceBetween="30"
            slidesPerView="auto"
            :loop="true"
            :autoplay="{
            delay: 8000,
            }"
            :breakpoints="{
            240: {
            slidesPerView: 1,
            },
            565: {
            slidesPerView: 2,
            },
            }"
            :pagination="{ clickable: true }"
        >
          <SwiperSlide v-for="(item,index) in props.newsList" class="text-white" :key="index">
            <div class="h-screen flex items-center justify-center">
              <div class="rounded-2.5xl bg-white md:p-5 lg:p-12 dark:bg-jacarta-700">
                <div class="md:md-1 lg:mb-4 text-jacarta-300 flex flex-wrap gap-4 text-2xs dark:text-jacarta-300">
                <span>
										<time>{{item.time}}</time>
									</span>
                </div>
                <h2 class="md:mb-2 lg:mb-5 font-display md:text-base lg:text-xl text-jacarta-700 hover:text-accent dark:text-white dark:hover:text-accent">
                  <p>{{item.title}}</p>
                </h2>
                <p class=" text text-jacarta-700 dark:text-jacarta-300  sm:line-clamp-6 md:line-clamp-6 lg:line-clamp-8 xl:line-clamp-10">
                  {{item.content}}
                </p>
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
      </section>
    </main>
  </div>

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
